<template>
  <div class="index">
    <el-container style="height: 100%">
      <el-header class="lolo">
        <head-cps></head-cps>
      </el-header>
      <el-container style="height: 100%" class="middle">
        <el-aside width="auto">
          <aside-cps></aside-cps>
        </el-aside>
        <el-main>
          <main-cps></main-cps>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import HeadCps from "./cps/head/index.vue"
import AsideCps from "./cps/aside/index.vue"
import MainCps from "./cps/main/index.vue"
</script>

<style lang="less" scoped>
.lolo {
  background: linear-gradient(to right, rgb(8, 8, 161), rgb(25, 136, 201));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5vw;
}
.index {
  width: 100%;
  height: 100%;
}

.middle {
  position: fixed;
  top: 5vw;
  left: 0;
  right: 0;
}
</style>
